<template>
    <div class="textShowBox">
        <div class="showCom">
            <slot name="show"></slot>
        </div>
        <div class="btnList">
            <div class="titleBox">
                <slot name="title"></slot>
            </div>
            <div class="btnBox">
                <el-tooltip class="box-item" effect="dark" content="复制代码" placement="bottom">
                    <img class="operatingButton" src="/svg/icon_copy.svg" @click="copyToClipboard" alt="SVG Image">
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="查看源代码" placement="bottom">
                    <img class="operatingButton" src="/svg/icon_daima.svg" @click="showVSCode" alt="SVG Image">
                </el-tooltip>
            </div>
        </div>
        <!-- 使用 v-model 绑定 str 字符串到文本框 -->
        <div class="codebox" v-show="SourceCode">
            <pre><code>{{ str }}</code></pre>
        </div>
        <textarea v-model="str" ref="copyInput" class="noShowTextarea"></textarea>
        <div class="contractBtn" v-show="SourceCode" @click="showVSCode">
            <el-icon>
                <CaretTop />
            </el-icon>
            隐藏源代码
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
    textCoyp: {
        type: String,
        default: ``
    },
    // 是否展开代码
    showSourceCode: {
        type: Boolean,
        default: false
    }
});
const str = ref(props.textCoyp);
const SourceCode = ref(props.showSourceCode)
const copyInput = ref(null);
const copyToClipboard = () => {
    copyInput.value.select();
    document.execCommand('Copy');
};
const showVSCode = () => {
    SourceCode.value = !SourceCode.value
}
</script>
<style lang="scss" scoped>
.textShowBox {
    position: relative;
    margin:10px auto;
    width: 90%;
    border: 1px solid #ccc;
    border-radius: 5px;

    .btnList {
        // border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 5px 20px;
        display: flex;
        justify-content: space-between;
        .titleBox{
            flex: 1;
        }
        .btnBox{
            display: flex;
            flex: 0;
            min-width: 55px;
            justify-content: end;
            .operatingButton {
                height: 22px;
                margin-left: 5px;
                cursor: pointer;
                opacity: .6;
            }
    
            .operatingButton:hover {
                opacity: 1;
            }
        }
    }


    .codebox {
        overflow-x: auto;
        white-space: pre-wrap;
        font-size: 13px;
        padding: 10px;
        background-color: #F5F7FA;

        pre {
            min-width: none;
            max-width: 100%;

            code {
                width: auto;
                min-width: none;
            }
        }
    }

    .noShowTextarea {
        width: 0;
        height: 0;
        position: absolute;
        top: 10px;
        left: 10px;
        opacity: 0;
    }

    .CopyBtn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        border: 1px solid #666;
        font-size: 12px;
        width: 60px;
    }

    .CopyBtn:hover {
        background: #dfdfdf;
        font-weight: 700;
    }

    .contractBtn {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
    }

}</style>